import React, { useState } from 'react'
import { Button, Input, Form, Tabs } from 'react-vant'
import style from './index.module.less'
import logo from '../../assets/logo.png';
import { useNavigate } from 'react-router-dom';

export default () => {
    const [activeTab, setActiveTab] = useState('登录')
    const navigate = useNavigate()
    const [loginForm] = Form.useForm()
    const [registerForm] = Form.useForm()

    const onFinishLogin = values => {
        console.log('登录表单提交:', values)
    }

    const onFinishRegister = values => {
        console.log('注册表单提交:', values)
    }

    return (
        <div>
            <div className={style.login}>
                <div className={style.logo}>
                    <img src={logo} alt="" />
                </div>
                <h1 className={style.title}>您的专属智能健身助手</h1>
                <div className={style.tabs}>
                    <Tabs active={activeTab} onChange={setActiveTab}>
                        <Tabs.TabPane name='登录' title='登录'>
                            {activeTab === '登录' && (
                                <Form
                                    form={loginForm}
                                    onFinish={onFinishLogin}
                                    footer={
                                        <div style={{ margin: '16px 16px 0' }}>
                                            <Button round nativeType='submit' type='primary' block  onClick={() => navigate('/Home')}>

                                                登录
                                            </Button>
                                        </div>
                                    }
                                >
                                    <Form.Item
                                        rules={[{ required: true, message: '请填写用户名' }]}
                                        name='username'
                                        label='用户名'
                                    >
                                        <Input placeholder='请输入用户名' />
                                    </Form.Item>
                                    <Form.Item
                                        rules={[{ required: true, message: '请填写密码' }]}
                                        name='password'
                                        label='密码'
                                    >
                                        <Input placeholder='请输入密码' />
                                    </Form.Item>
                                </Form>
                            )}
                        </Tabs.TabPane>

                        <Tabs.TabPane name='注册' title='注册'>
                            {activeTab === '注册' && (
                                <Form
                                    form={registerForm}
                                    onFinish={onFinishRegister}
                                    footer={
                                        <div style={{ margin: '16px 16px 0' }}>
                                            <Button round nativeType='submit' type='primary' block>
                                                注册
                                            </Button>
                                        </div>
                                    }
                                >
                                    <Form.Item
                                        rules={[{ required: true, message: '请填写邮箱' }]}
                                        name='email'
                                        label='邮箱'
                                    >
                                        <Input placeholder='请输入邮箱' />
                                    </Form.Item>
                                    <Form.Item
                                        rules={[{ required: true, message: '请填写密码' }]}
                                        name='password'
                                        label='密码'
                                    >
                                        <Input placeholder='请输入密码' />
                                    </Form.Item>
                                    <Form.Item
                                        rules={[{ required: true, message: '请确认密码' }]}
                                        name='confirmPassword'
                                        label='确认密码'
                                    >
                                        <Input placeholder='请确认密码' />
                                    </Form.Item>
                                </Form>
                            )}
                        </Tabs.TabPane>
                    </Tabs>
                </div>
            </div>
        </div>
    )
}
